.introduction{
  width: 100%;
  height: 150px;
  background-color: #333333;
}
.introduction .box{
  padding-top: 30px;
  margin: 0 auto;
}
.introduction .title{
  font-size: 28px;
  font-weight: bold;
  color: #FD641F;
}
.introduction .content{
  color: #FFF;
  font-size: 18px;
  margin-top: 15px;
}
.main{
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 60px;
  min-height: 635px;
}
.main .title{
  padding: 30px 0px 10px 0px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: solid #CCCCCC 2px;
}
.main .content{
  padding-top: 20px;
}
.main .right div:nth-child(1){
  font-size: 26px;
  font-weight: bold;
  color: #333;
  padding-top: 60px;
}
.main .right div:nth-child(2){
  font-size: 14px;
  line-height: 22px;
  margin-top: 40px;
}
.main .right div:nth-child(3){
  font-size: 14px;
  line-height: 22px;
  margin-top: 20px;
}
.bottom{
  width: 100%;
  text-align: center;
  background-color: #000;
  color: #CCC;
  font-size: 12px;
  padding: 5px 0px;
}
@media screen and (min-width: 800px){
  .introduction .box{
    width: 70%;
    min-width: 800px;
  }
  .main{
    width: 70%;
    min-width: 800px;
  }
  .main .content img{
    max-width: 350px;
    width: 40%;
    float: left;
  }
  .main .right{
    float: left;
    width: 60%;
  }
  .main .right div{
    margin-left: 20px;
  }
}

@media screen and (max-width: 800px){
  .introduction .box{
    max-width: 95%;
  }
  .main{
    max-width: 95%;
  }
  .main .content{
    width: 100%;
    text-align: center;
  }
  .main .content img{

  }
}
